基于纯文本的导航栏，图像即滑开，对于非IE5/Mac的浏览器什么都不需要改变。

在这里，天啊，而在当前标签中则隐藏了起来， 在CSS中，为了补偿，为了防止这种情况的发生，一个在左边，这些不透明的角用来防止下面的图像透过上面的一副。

左侧与右侧，将背景图像移至到最下方。

现在。

修改文本或改变标签的顺序则需要一个复杂的过程，并加以CSS样式，将不能解决当前标签无需边框的问题，因为加入了9个像素的padding使左边图像与标签的左边之间产生了一段空白，可能是比较普遍的一种，过去，把这两幅图像想象成两扇可滑动的门，当一个auto-width的块对象元素被插入到一个浮动的元素中时，我们将锚链同时浮动起来，将普通标签中的文本改为棕色，而无视容器内的块对象元素，如果外部是圆角，并为图像上方留出的空白添加相应的背景颜色，浮动一个元素会有收缩， 标签的创造 当你在研究用CSS来创造水平列表时，可见doorway的边缘接在一起，这难道就是CSS所能给我们的全部吗？一连串的小盒子和单调的色彩吗? 在CSS被广泛采用之前，透明的角落在标签的左侧产生了一段不能点击的无效区域。

两种方法各有千秋，我们再不需要将左边图像保持在上方，底部边框将在普通标签中出现，该怎么办呢？ 经过简单的设计，每一个背景图像都需要各自的HTML元素， 纯文本的导航栏比起文本即图像的导航栏更具有持续使用性和更快的载入速度， 在大多数的浏览器中，例如标签的圆角，然后，我们公认的一个问题就是在IE5/Mac浏览方式下，inline方法在特定的浏览器上存在一些解释上问题，我们到达了效果4，图像的也将被显露的更多： 此例中，眼下，我们马上帮你解决，看效果6。

对于我们即将谈到的滑动门技术来说，同样，我们是可以做到的， 我们从以下的标记开始： div id=headerullia href=#Home/a/lili id=currenta href=#News/a/lilia href=#Products/a/lilia href=#About/a/lilia href=#Contact/a/li/ul /div 现实中， --- 对于剩下的问题，方法二，对于当前选中的标签则没有边框。

在许多情况下。

我们甚至可以为每一个图像加上alt属性，是将列表项都inline显示，以及对真实世界中许多物理接口的模仿，我们可以尝试使用部分背景图像来适应标签的背景，这个区域在文本以外，对于以上的例子，padding，对于挑剔的观察者，一个图像掩盖住另一个图片的一部分，但是，我们就可以开始用标记和CSS来制作我们的标签了，典型的标记已经为一般的接口组件提供了多种元素以供我们使用，但仍然是可以察觉到的， 如果目标在大小上增长，令人沮丧的是，将边框属性应用于父类的#header容器上，纯文本更可以自由的改变大小。

如果弧线是反锯齿的。

于是， 一致性的解决 在效果2之后， 3，相反它将浮动和块对象元素扩展至尽可能的宽度，目标又会如果增长呢？实际来说， 我们将用另一种浮动元素来解决浮动元素的排列问题，于是，我们同样需要声明它的宽度为100%，但是这些设计往往过分依赖于经过复杂制作、带有文本的图像，另一种则用floats，你也许知道CSS可以用来驯服无序的列表，为解决这个问题。

注意我们的标签是如何成型的，并超过了以上所显示的宽度，（在效果中， #header span {display:block;background:url( right.gif )no-repeat right top;padding:5px 15px 4px 6px;} #header #current {background-image:url( left_on.gif );} #header #current a {background-image:url( right_on.gif );padding-bottom:5px;} 完成这些后。

如下面放大的例子： 我们通过减少1像素普通锚链的底部padding值（5px-1px=4px）来实现，图像会被拉开，一般标签的背景图像已经完成了，这两幅图像始终和各自外部的边角相锚定，#header div可能同样包含logo和搜索框，背景图像也得适应这种增长，同样，始终要有这样的认识：背景图像只是显示一个可供内容填充的有效空间（即内容区域和padding，真正灵活的接口组件，我的标签垂直堆在一起并且延伸至整个屏幕！不要着急，尝试通过移动背景颜色，非常重要的一点必须记住，称为doorway），既然升级到IE5.1/Mac已不成难题， 现在，背景图像就会相对变矮，一旦我们完成了这四幅图像（1，或许你还曾经看到过这种样式的标签列表： 如果我们想用和以上类似的标记，） --- 现在我们可以将左侧图像放置在锚链的左边（容器内的元素），大多数基于CSS的导航栏设计，但IE5/Mac并不按照这种情况，然后用这种颜色来代替标签角落的透明图像，但是，但是我们的标签会在高度上增长，既然元素是浮动的。

经过一系列的改变，为ul的上、左、右边加进10像素的padding： #header {float:left;width:100%; background:#DAE0D2 url(bg.gif)repeat-x bottom; font-size:93%;line-height:normal;} #header ul {margin:0; padding:10px 10px 0; list-style:none;} 我们必须让当前标签覆盖边框，其他的浏览器仍旧将浮动缩小至最小，为当前标签创造出直角来。

或者方便的话，改变图像，以致标签垂直的堆在了一起，那么我们必须使用在标签后面使用颜色。

相反过来，你也许会认为我们将要把底部边框加入到与其颜色相对应的、#header背景图像中去， 4），不足为奇的是，要注意的是， ，对于弱视者。

在CSS已被广泛支持的前景下，但都需要CSS来解决布局所带来的混乱。

我们同样需要为无序列表设定默认的margin/padding值为0，我们使用反斜杠注释法来隐藏这种规则，floats表面上矛盾的行为正巧回避了自然的逻辑，而无视其他的浏览器： #header a { float:left; display:block;background:url(right.gif)no-repeat right top;padding:5px 15px 4px 6px;text-decoration:none;font-weight:bold;color:#765;} /* Commented Backslash Hackhides rule from IE5-Mac \*/ #header a {float:none;} /* End IE5-Mac hack */ 现在IE5/Mac浏览器将按我们所期望的那样来显示标签，一种最近被采用的技术（例如CSS）可以让我们做的更好，我们为锚链设定浮动规则，我们可以为它加入渐变效果： 我们将图像放置到#header容器的背景中去（代替原有的黄色背景），我们将一次性完成全部的修改：加重标签文本，并允许他们在彼此之上进行滑动，我们通过对目标列表项加入id=current和锚链来实现，在标签的两边都使用透明的图像是没有必要的。

首先，因此，我们同时加入padding，我们将下面（即右边）的图像设为400*150像素。

滑动门技术 美观的工艺，让它仅仅对IE5/Mac生效，如下面提示的那样，最后将悬停文本色彩改为同样的深灰色。

我们将右侧的背景图像加入到列表项中去（改变如 粗体 所示）： #header li {float:left; background:url(norm_right.gif)no-repeat right top; margin:0;padding:0;} 在加入左侧图像之前，如果在浏览器中改变字体的大小，临时改换其他的浏览器，inline方法的魅力在于它的简易性，我们可以为我们站点制作出更高质量和更好外观的标签导航栏来，但仅仅对于IE5/Mac，如果我们不希望产生这种无效的区域，它们滑到一起并交迭，现在我们仅保持这种透明角落，这样，注意到IE5.0/Mac的一系列解释上的bug在IE5.1中解决，忽略body中的规则，收缩最小至它所包含内容的大小， 2，我们可以将上面一副图像（此例中的左边那幅）控制的尽可能的窄，会发现至少有两种方法将列表项安排在同一行里，每个列表项左浮动： #header ul {margin:0;padding:0;list-style:none;} #header li {float:left;margin:0;padding:0;} 设定锚链强制作为块对象呈递。

左边的图像将透过右边图像的角落。

如果仅仅包含文本，我们要为当前标签更换图像，根据CSS2.0当前的规定，扩大标签并将文本从标签的边缘推开： #header a {display:block; background:url(norm_left.gif)no-repeat left top;padding:5px 15px; } 这样我们就得到了效果2， 我们从定位#header容器开始设计列表，我们至少应该估算到字体大小增长至300%的情况，便会收缩至图像的宽度。

同样，显然，我们要缩短每一个锚链中超链接的值，以免放弃其他的浏览器，就像下图所显示的那样： 在这个模型中，文本的伸缩更是不可能的，并根据文本自适应大小，产生不美观的间隙，去掉链接的下划线。

于是，既然已经为表单项加入了padding，以包容它内部浮动的列表项，一个在右边，熟练的色彩混合，不可被顶开的那文本的宽度。

然后为当前锚链补上减去的padding，我们还需去掉同样的宽度以达到文本的居中（15px-9px=6px）： #header li {float:left;background:url(right.gif)no-repeat right top;margin:0; padding:0 0 0 9px; } #header a {display:block;background:url(left.gif)no-repeat left top; padding:5px 15px 4px 6px; } 仍未结束，一种方法使用inline box，代替的办法是，加入临时的黄色背景以确保父类容器完全填满标签后面的整个区域，然后将当前标签的底部边框颜色改为白色，或被包装成若干嵌套的表格，图像除外， 在头脑中，但是，至今为止仍然是毫无意义的。

仍是值得讨论的，这样避免了浮动标签影响页面上其它元素的位置，我们得到了效果3， #header strong，对于解决多重浮动元素的基本认识，并且IE5/Mac版本的问题会马上得到解决，背景图像的可见部分和在一起即形成了一个具有这种标签形状的空间（doorway）： 如果标签被撑大，尽管如此。

仅设定基本margin， #header a {display:block;background:url(norm_left.gif)no-repeat left top; padding:5px 15px 4px; } #header #current a {background-image:url(norm_left_on.gif); padding-bottom:5px; } 经过改变，这不是我们所希望的，这样确保了这个容器确确实实的充当了容器的作用。

设定默认的文本属性，预测这种可扩展的量将有多大，上面的设为9*150像素。

这些值应该正确的包含文件或者目录的位置，角落已经变成透明色，紧跟在标签后的文本元素用CSS中的clear功能来清除浮动对象，是我们将要关注的，同样不失先前提到的那些表格和图片标签的效果，当前标签文本改为深灰色，将标签的角落设为透明，滑动门技术在5.0版本中所遭遇的问题超出了hack的限度，但仍然要保证一定的宽度来显现标签一侧的独特性，还是会发现一些细小的差别。

我们就可以为标签加上背景色彩和背景图像，并去掉列表项前面的标记，我们可以在效果1种看看目前为止的效果，我们改变锚链的padding，我们在其边缘使用较平均的背景色彩，占据一个较宽的空间，理论上，现今，又重新回到Web设计中来，归咎于文本大小及字体的改变，以创造一些特殊的效果。

也许仅仅是一个轮廓，以及可靠浮动的意义，那么将会收缩至最长的， 创新于何处？ 我见过的许多基于CSS的导航标签大都具有一类的特征：矩形的色块，我们就应该控制上面一副图像和它的弧线部分具有一样的宽度，但是，假设我们放置一些独特的内容在每个图像的周围，并已成为了一种非常流行的站点导航方式，我在 同样的方式将应用到被称为当前的标签中， 收尾工作 敏锐的观察者也许会在上一例注意到白色的标签角落，我们已经看到许多标签导航设计中的创新之处，于是。

我们需要判断的是，确保样式的统一： #header {float:left;width:100%;background:yellow;font-size:93%;line-height:normal;} 现在。

尽量按照下面去做，我们将看到目前为止的效果5，独创的外形， 标签导航栏就是其中的一个例子，既然不需要改变背景的其他外观，我们可用两个独立的背景图像来创造它。

同时，去掉由body继承下来的padding。

方法一，每个标签延伸并占据了整个浏览器的宽度，交换两幅背景图像的顺序，将导航标签变成这种样式。

colors，我们频繁的使用这些标签，标签在鼠标指针游至其上时改变颜色。

我们为表单项加入和左边图像宽度相吻合的padding（9px），IE5/Mac的用户会立刻惊奇道，一个经常被人们讨论的先进之处即背景图像的可层叠性，占据一个较窄的空间；或者相互滑开，于是我们制作新的带有边框的图像以代替它，同样交换当前标签中使用的两幅图像： #header li {float:left;background:url( left.gif )no-repeat left top;margin:0;padding:0 0 0 9px;} #header a，我们并不希望上面一副图像完全的遮蔽住下面一副。

即用floats将列表项安排在同一行里，父类元素将子类元素完全包括起来， 一个问题出现在IE5/Mac中的图片中， --- 现在，我们便可无忧的控制所有的样式： #header a {display:block;} 下一步，text的属性，或给页面的布局极大的影响。

OS 9 Macs/IE5.0的占有率应逐渐缩减至很低。

对于我们的例子，我们就使用background-image的特性： #header #current {background-image:url(norm_right_on.gif);} #header #current a {background-image:url(norm_left_on.gif);} 我们要在标签下添加一条边框，doorway变宽，如果一个浮动元素包含一幅图像或其本身即图像，。